<template>
  <view class="wrap">
    <view class="contentWrap" v-if="itemContent">
      <view class="title">{{ titles }}</view>
      <rich-text class="content" :nodes="itemContent" />
    </view>
    <view class="nodate" v-else>
      <img class="img" src="https://ainengli.meilianshuke.com/jkhx/noData.png" alt="" />
      <view class="nodate_text">
        <text class="name">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { educationInfo, readDetail } from '@/module/api/popularScience'
const stateId = ref('')
const itemContent = ref('')
const titles = ref('')
const isread = ref('')
const userInfo = ref({})
const getUserId = ref('')
const dateStatus = ref('')
onLoad((option) => {
  stateId.value = option.id
  isread.value = option.isreadId
  dateStatus.value = option.dateStatus
})
onShow(() => {
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  getUserId.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''
  init()
})

const h3 = "font-weight: 500;font-size: 16px;color: #222222;line-height: 24px;margin: 8px 0 0 0"
const ul = "list-style: none;margin: 0;padding: 0;"
const p = "font-weight: 400;font-size: 15rpx;color: #222222;line-height: 27px;margin: 8px 0 0 0"
const strong = "font-weight: bold;"

const init = () => {
  uni.showLoading({
    title: '加载中'
  })
  if (
    ((isread.value && dateStatus.value != 0) || dateStatus.value == null) &&
    userInfo.value &&
    userInfo.value.empi
  ) {
    const param = {
      empi: userInfo.value.empi,
      id: isread.value,
      userId: getUserId.value
    }
    readDetail(param).then((res) => {
      if (res.code == 0) {
        console.log(res.data)
      }
    })
  }
  educationInfo(stateId.value).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      let content = res.data.content || ''
      
      content = content.replace(/<img /g, '<img style="display:block;width:100%;margin-top: 8px;" ')
      content = content.replace(/<p&nbsp;class="" /g, '<p')
      content = content.replace(/<h3/g, `<h3 style="${h3}" `)
      content = content.replace(/<ul/g, `<ul style="${ul}" `)
      content = content.replace(/<p/g, `<p style="${p}" `)
      content = content.replace(/<strong/g, `<strong style="${strong}" `)
      
      itemContent.value = content
      titles.value = res.data && res.data.title ? res.data.title : ''
      

    }
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 32rpx;
  background: #fff;
  padding-bottom: calc(16px + constant(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-top));

  .contentWrap {
    font-style: normal;

    .title {
      font-weight: 600;
      font-size: 40rpx;
      color: #222222;
      line-height: 60rpx;
    }

    .content {
      margin-top: 48rpx;
      display: block;
      font-size: 30rpx;
      color: #222;
    }
  }

  .nodate {
    text-align: center;

    .img {
      display: inline-block;
      width: 320rpx;
      height: 240rpx;
      margin-top: 240rpx;
    }

    .nodate_text {
      .name {
        display: block;
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #666;
        text-align: center;
      }
    }
  }
}
</style>
